<template>
    <div class="comment_show">
        <div
                class="comment_item"
                v-for="(item, index) in commentData"
                :key="item.id"
        >
            <div class="user_info">
                <!--        <div class="avatar" @click="goUserHome(item.user_id)">-->
                <div class="avatar">
                    <img :src="item.avatar" alt=""/>
                </div>
                <div :class="item.user_status == 'DELETED' ? 'delete_color' : 'username'">
                    {{ item.name }}
                </div>
                <div class="user_status">
                    {{ item.boolTrainer }}
                </div>
            </div>
            <div class="comment_info">
                <div class="status_bar">
                    <div class="floor">{{ (page - 1) * 20 + index + 1 }}楼</div>
                    <div>评论时间：{{ formatDateMDHM(item.createTime) }}</div>
                    <div>回复数：{{ item.childReply.total }}</div>
                    <!--          <div>点赞数：{{ item.postPriseCount }}</div>-->
                </div>
                <div class="comment_info_content">
                    {{ item.content }}
                </div>
                <div class="comment_controller">
                    <!--          <div @click="goodsHandle(item)">-->
                    <!--            {{-->
                    <!--              item.hasPraise-->
                    <!--                ? `已点赞(${item.postPriseCount})`-->
                    <!--                : `点赞(${item.postPriseCount})`-->
                    <!--            }}-->
                    <!--          </div>-->
                    <div @click="openReply(item)">回复层主</div>
                </div>
                <div class="reply_area" v-if="item.allChildCount != 0">
                    <div
                            class="reply_item"
                            v-for="replyChild in item.childReply.records"
                            :key="replyChild.id"
                    >
                        <div class="left">
                            <div
                                    class="avatar"
                            >
                                <img :src="replyChild.avatar" alt=""/>
                            </div>
                            <div class="user_reply_info">
                                <div>
                                    <lable :class="replyChild.user_status === 'DELETED' ?'delete_color' : 'username'">
                                        {{ replyChild.childname }}
                                    </lable>
                                    &nbsp;回复&nbsp;
                                    <lable :class="replyChild.p_user_status === 'DELETED' ?'delete_color' : 'username'">
                                        {{ replyChild.pname }}
                                    </lable>
                                </div>
                                <div class="reply_time">
                                    {{ formatDateMDHM(replyChild.createTime) }}
                                </div>
                                <div class="content">{{ replyChild.content }}</div>
                            </div>
                        </div>
                        <div class="right">
                            <!--              <div class="goods" @click="goodsHandle(replyChild)">-->
                            <!--                {{-->
                            <!--                  replyChild.hasPraise-->
                            <!--                    ? `已点赞(${replyChild.postPriseCount})`-->
                            <!--                    : `点赞(${replyChild.postPriseCount})`-->
                            <!--                }}-->
                            <!--              </div>-->
                            <div class="reply" @click="openReply(replyChild)">回复</div>

                        </div>
                    </div>
                    <div
                            class="more_show"
                            v-if="item.childReply.current < item.childReply.pages"
                            @click="getMoreReply(item.childReply, item.id, item.course_id,item.course_ware_id)"
                    >
                        点击查看更多
                    </div>
                    <div
                            class="more_show"
                            v-if="item.childReply.current == item.childReply.pages"
                    >
                        没有回复啦
                    </div>
                </div>
            </div>
        </div>
        <!--回复框-->
        <el-dialog
                :title="'回复 '+cur_user_name+':'"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-input type="textarea" v-model="comment_content"></el-input>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import {formatDateMDHM} from "@/util/tools";

    export default {
        props: {
            commentData: {
                type: Array,
                default: () => [],
            },
            page: {
                type: Number,
                default: () => 1,
            },
        },
        data() {
            return {
                dialogVisible: false,
                cur_user_name: '',
                comment_content: '',
                comment_pid: '',
                courseWareReplyUrl: '/mobiles/courseWareReply',
            }
        },
        methods: {
            //回复提交
            handleSubmit() {
                this.$emit("submitComment", this.comment_content, this.comment_pid)
                this.dialogVisible = false;
                this.comment_content = '';
                this.comment_pid = '';
            },
            //获取更多回复
            getMoreReply(data, comment_id, course_id, course_ware_id) {
                console.log(data, comment_id, course_id, course_ware_id);
                this.$https
                    .post("/mobiles/getCourseWareChildComment", {
                        course_id: course_id,
                        course_ware_id: course_ware_id,
                        user_id: JSON.parse(localStorage.getItem("userInfo")).userId,
                        size: 5,
                        current: data.current + 1,
                        id: comment_id,
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.data.data.records.length > 0) {
                            data.records = [...data.records, ...res.data.data.records];
                        }
                        data.current++;
                        console.log(data);
                    });
            },
            //点击去用户主页
            goUserHome(id) {
                this.$router.push(`/user/home/${id}`);
            },
            //转换时间
            formatDateMDHM(date) {
                return formatDateMDHM(date);
            },
            //点赞
            goodsHandle(item) {
                this.$https
                    .post("/mobiles/commentPraise", {
                        praiseUser: this.$store.state.userid,
                        myReplyId: item.myReplyId,
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            item.postPriseCount = res.data.data.praiseCount;
                            if (res.data.data.praiseStatus == "点赞") {
                                item.hasPraise = true;
                            } else {
                                item.hasPraise = false;
                            }
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            //点击回复按钮
            openReply(item) {
                this.dialogVisible = true;
                this.comment_pid = item.id;
                this.cur_user_name = item.childname == null ? item.name : item.childname;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(() => {
                        done();
                    })
                    .catch(() => {
                    });
            }
        },
    };
</script>

<style lang="scss" scoped>
    .avatar {
        cursor: pointer;
    }

    .comment_show {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;

        .comment_item {
            width: 100%;
            margin-top: 10px;
            display: flex;
            flex-flow: row nowrap;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);

            .user_info {
                width: 12%;
                padding: 0 0 20px 0;
                background-color: white;
                display: flex;
                flex-flow: column nowrap;
                align-items: center;

                .delete_color {
                    color: #999999;
                }

                .avatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-top: 30px;
                    margin-bottom: 10px;
                    border: 1px solid rgba(0, 0, 0, 0.1);

                    img {
                        width: 100%;
                    }
                }

                .user_status {
                    font-size: 12px;
                    color: salmon;
                }

                .follow_area {
                    margin-top: 10px;
                }
            }

            .comment_info {
                flex: 1;
                margin-left: 1%;
                background-color: white;
                padding: 10px;

                .status_bar {
                    width: 100%;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    padding: 0 0 10px 0;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

                    & > div {
                        margin-right: 20px;
                        font-size: 12px;
                    }
                }

                .comment_info_content {
                    margin-top: 10px;
                }

                .comment_controller {
                    width: 100%;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: flex-end;
                    align-items: center;

                    & > div {
                        margin-left: 15px;
                        font-size: 14px;
                        cursor: pointer;
                    }
                }

                .reply_area {
                    width: 100%;
                    background-color: #f8f8f8;
                    margin-top: 30px;

                    .reply_item {
                        width: 100%;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-between;
                        align-items: center;
                        padding: 5px;
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                        font-size: 14px;

                        .left {
                            width: 89%;
                            display: flex;
                            flex-flow: row nowrap;
                            // align-items: center;
                            & > div {
                                margin-right: 10px;
                            }

                            .user_reply_info {
                                width: 90%;

                                .reply_time {
                                    font-size: 12px;
                                    color: #999;
                                }

                                .username {
                                    color: #00a7ff;
                                }

                                .delete_color {
                                    color: #999999;
                                }

                                .content {
                                    max-width: 100%;
                                    height: 100%;
                                }
                            }

                            .avatar {
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                                overflow: hidden;
                                border: 1px solid rgba(0, 0, 0, 0.1);

                                img {
                                    width: 100%;
                                }
                            }
                        }

                        .right {
                            width: 14%;
                            font-size: 12px;
                            display: flex;
                            flex-flow: row nowrap;
                            justify-content: flex-end;
                            align-items: center;

                            & > div {
                                margin-left: 10px;
                                cursor: pointer;
                            }
                        }
                    }

                    .more_show {
                        width: 100%;
                        background-color: #f5f5f5;
                        text-align: center;
                        line-height: 40px;
                        font-size: 14px;
                        cursor: pointer;
                    }
                }
            }
        }
    }

</style>
